<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>添加节点</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../../css/sm.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/normal.css" />
    <link rel="stylesheet" type="text/css" href="../../css/creatProject.css" />
    <link rel="stylesheet" type="text/css" href="../../iconfont/iconfont.css" />
</head>

<body>
    <div class="page allWarp">
        <div class="content">
            <div class="creatProject" onclick="moveTo('newNode')">
                <span style="display: flex; align-items: center;" class="colorange">
                    <i class="iconfont icon-tianjia"></i>
                    <span class="left5">添加项目节点</span>
                </span>
                <i class="iconfont icon-arrow-right"></i>
            </div>
            <div class="creatBox">
            	<ul>
            		<li>
            			<span class="width20">项目名称</span>
            			<span class="width80">
            				<input type="text" class="width100" readonly="readonly" v-model="projectName">
            			</span>
            		</li>
            		<li>
            			<span class="width20">客户名称</span>
            			<span class="width80">
            				<input type="text" class="width100" readonly="readonly" v-model="customerName">
            			</span>
            		</li>
            		<li>
            			<span class="width20">手机号码</span>
            			<span class="width80">
            				<input type="tel" class="width100" readonly="readonly" v-model="customerPhone">
            			</span>
            		</li>
            		<li>
            			<span class="width20">客户地址</span>
            			<span class="width80">
            				<input type="text" class="width100" readonly="readonly" v-model="customerAddress">
            			</span>
            		</li>
                    <li>
                        <span class="width20">销售人员</span>
                        <span class="width80">
                            <input type="text" class="width100" readonly="readonly" v-model="salerName">
                        </span>
                    </li>
            	</ul>
            </div>
            <div class="dotShow" v-if="nodeList.length != 0" style="margin-bottom: 4rem;">
                <div class="trackList">
                    <ul class="trackListUl">
                        <li v-for="item in nodeList" v-if="item.deleted != 1">
                            <p class="font12 col999 lineheight20 dot around">
                                <span>
                                    <span v-text="item.nodeName"></span>
                                    <span>
                                        负责人：<span class="colorange" v-text="items.dutyUser+' '"  v-for="items in item.nodeDutyList"></span>
                                    </span>
                                </span>
                                <span class="width30" style="text-align: right">
                                    <i class="iconfont icon-shanchu" onclick="deleteNode()" :data-nodeCode="item.nodeCode"></i>
                                    <i class="iconfont icon-bianji" onclick="editNode()" :data-nodeCodes="item.nodeCode"></i>
                                </span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="saveProject" onclick="save()">开始派工</div>
        </div>
    </div>
    <script type="text/javascript" src="../../js/zepto.js"></script>
    <script type="text/javascript" src="../../js/sm.min.js"></script>
    <script type="text/javascript" src="../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../js/ajax.js"></script>
    <script type="text/javascript" src="../../js/back.js"></script>
    <script type="text/javascript">
        var projectCode = GetQueryString("projectCode");
        var keyN = JSON.parse(getCookie("user_data_two"));
        var role = GetQueryString("role");
        var createUid;
        var customerPhone;
        if (keyN != null) {
            createUid = keyN.userId;
        }

        function createElements(val){
            var mb = document.createElement('div');
            mb.className = 'mb';
            mb.setAttribute("style", "width:100%;height:100vh;display:block;");

            var content = document.createElement('div');
            content.setAttribute("style", "width: 16.6875rem;height:13.1875rem;position: absolute; left: 0; top: 0; right: 0; bottom: 0;margin:auto;border-radius: 8px;");
            content.className = 'bgWhite';

            var article = document.createElement('div');
            article.innerHTML = "<div class='font0 textcenter lineHeight25' style='padding:0 1.25rem;margin:1.25rem 0 1rem 0;'><span class='font18 col36 lineHeight25 disBlock'>项目派工</span></div>"+
                                "<div style='padding:0 1.25rem; text-align: center;'>"+
                                    "<span class = 'font14 col666'>是否确认派工至下一节点</span>"+
                                "</div>"+
                                "<div style='padding:0 1.25rem; margin-top:.625rem;text-align: center;'>"+
                                    "<span class = 'font14 colorange'><span>"+val.nodeName+"</span>：<span>"+val.nodeDutyList[0].dutyUser+"</span> <span>"+val.nodeDutyList[0].dutyPhone+"</span></span>"+
                                "</div>";

            var btns = document.createElement('div');
            btns.setAttribute("style", "height:2.875rem;width:100%;position:absolute;bottom:0;display:flex;line-height:2.875rem;border-top:1px solid #E8E8E8;");
            btns.innerHTML = '<div class="width50 font0 textcenter" style="border-right:1px solid #E8E8E8;" id="moveToNoSign"><span class="font14 col9A9A9A">取消</span></div>'+
                             '<div class="width50 font0 textcenter" id="moveToSign"><span class="font14 col7FCB49">确定</span></div>';
            content.appendChild(article);
            content.appendChild(btns);
            mb.appendChild(content);
            document.body.appendChild(mb);

            $('.mb').hide()

            $('#moveToSign').on('click',function(){
                var params = {};
                params.projectCode = projectCode;
                kfAjaxGet.doJob(params, function(json) {
                    if (json.code == 200) {
                        $('.mb').hide();
                        window.location = 'projectDetail.html?projectCode='+projectCode+'&role='+role;
                    } else if (checkcode(json.code)) {

                    } else {
                        $.toast(json.message);
                    }
                })
            })
            $('#moveToNoSign').on('click',function(){
                console.log('取消');
                $('.mb').hide()
            })

        };
        

        function showContractAlert(){
            $('.mb').show();
        };

        var demo = new Vue({
            el: '.allWarp',
            data: {
                projectName: '',
                customerName:'',
                customerPhone: '',
                customerAddress: '',
                salerName:'',
                nodeList:[],
            },
            mounted:function() {
                inits();
                nodeList();
            },
        })

        // 初始化数据
        function inits(){
            var params = {};
            params.projectCode = projectCode;
            kfAjaxGet.projectDetail(params, function(json) {
                if (json.code == 200) {
                   var data = json.data;
                   demo.projectName = data.projectName;
                   demo.customerName = data.customerName;
                   demo.customerPhone = data.customerPhone;
                   demo.customerAddress = data.customerAddress;
                   demo.salerName = data.salerName;
                   demo.nodeList = data.nodeList;
                } else if (checkcode(json.code)) {

                } else {
                    $.toast(json.message);
                }
            })
        }

        // 节点列表
        function nodeList(){
            var params = {};
            params.projectCode = projectCode;
            kfAjaxGet.nodeList(params, function(json) {
                if (json.code == 200) {
                    demo.nodeDataOne = json.data[0];
                    createElements(demo.nodeDataOne);
                    console.log(demo.nodeDataOne)
                } else if (checkcode(json.code)) {

                } else {
                    $.toast(json.message);
                }
            })
        }

        //删除节点
        function deleteNode(){
            var _that = $(event.currentTarget);
            var nodeCode = _that.attr("data-nodeCode");
            var params = {};
            params.nodeCode = nodeCode;
            params.updateUid = createUid;
            kfAjaxGet.deleteNode(params, function(json) {
                if (json.code == 200) {
                   history.go(0);
                } else if (checkcode(json.code)) {

                } else {
                    $.toast(json.message);
                }
            })
        }

        //编辑节点
        function editNode(){
            var _that = $(event.currentTarget);
            var nodeCode = _that.attr("data-nodeCodes");
            sessionStorage.removeItem('node_data');
            sessionStorage.removeItem('nodeSaler_data');
            window.location = 'addPoint.html?projectCode='+projectCode+'&nodeCode='+nodeCode+'&isNewNode=false'+'&come=an'+'&role='+role;   
        }

        // 跳转
        function moveTo(val){
            if(val == "newNode"){
                sessionStorage.removeItem('node_data');
                sessionStorage.removeItem('nodeSaler_data');
                window.location = 'addPoint.html?isNewNode=true&projectCode='+projectCode+'&come=cp'+'&role='+role;
            }
        }
        // 伪保存
        function save(){
            if(demo.nodeList.length == 0){
                $.toast("您还没有添加项目节点无法派工,请先添加项目节点");
                return false;
            }
            showContractAlert();
        }

        $(function(){
            $('#gohome').on('click',function(){
                window.location = 'myProject.html?role='+role;
            })
        })
    </script>
</body>
</html>